<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
        <style>
           .tab span{
               color: #fff;
               padding: 5px 10px;
               margin-left: 10px;
           }
           
           .active{
               background-color: #FF0000;
           }
           .unactive{
                background-color: #aaa;
           }
        </style>
    </head>
    <body>
        <div  id="container">
            <!--tab组件-->
            <div class="tab">
                <template v-for="tab in tabs">
                     <span v-if="currentOrder==tab.name" class="active" @click="chg(tab)">{{tab.value}}</span>
                      <span v-else class="unactive" @click="chg(tab.name)">{{tab.value}}</span>
                </template>
            </div>
            <br><br>
            <!--显示组件  每切换一次 组件都会重新渲染  希望保留之前的值 开启缓存-->
            <keep-alive>
            <component :is="currentOrder"></component>
            </keep-alive>
        </div>
        <script>
          //组件
          const ordera={
              activated(){
                  console.log("ordera 被激活")
              },
              deactivated(){
                    console.log("ordera 失活")
              },
              template:
              `
                <div>未支付订单列表
                 <input type="text" />
                </div>
              `
          };
          const orderb={
              template:
              `
                <div>已支付订单列表 <input type="text" /></div>
              `
          };
          const orderc={
              template:
              `
                <div>已完成订单列表 <input type="text" /></div>
              `
          };
         new Vue({
             el:"#container",
             data:{
                 tabs:[{name:"ordera",value:"未支付订单"},
                 {name:"orderb",value:"已支付订单"},
                 {name:"orderc",value:"已完成订单"}],
                 currentOrder:"ordera"
             },
             components:{
                 ordera,
                 orderb,
                 orderc
             },
             methods:{
                 chg(tab){
                     this.currentOrder=tab;
                 }
             }
         });
        </script>
    </body>
</html>
